<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Breakpoints & Media Queries</title>
  </head>
  <!-- Tailwind is mobile-first -->
  <body
    class="bg-black sm:bg-red-500 md:bg-green-500 lg:bg-blue-500 xl:bg-yellow-500 2xl:bg-purple-500"
  >
    <h1 class="text-white md:text-2xl lg:text-4xl xl:text-6xl 2xl:text-8xl"></h1>
    <script>
      function showBrowserWidth() {
        const browserWidth = window.innerWidth;
        document.querySelector(
          "h1"
        ).innerText = `Browser width: ${browserWidth}px`;
      }
      window.onload = showBrowserWidth;
      window.onresize = showBrowserWidth;
    </script>
  </body>
</html>

<!-- Breakpoint Classes
    sm	640px	  @media (min-width: 640px) { ... }
    md	768px	  @media (min-width: 768px) { ... }
    lg	1024px	@media (min-width: 1024px) { ... }
    xl	1280px	@media (min-width: 1280px) { ... }
    2xl	1536px	@media (min-width: 1536px) { ... }
  -->
